<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的书架</title>
    <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
    <link rel="stylesheet" href="css/BookCar.css">
    <style>
    </style>
</head>

<body>
<header>
    <h1>星龙小说网</h1>
</header>
<nav class="navbar">
    <ul>
        <li><a href="/index.html">首页</a></li>
        <li><a href="/Allnovels.html">全部小说</a></li>
        <li><a href="/about.html">关于我们</a></li>
        <li><a href="/listuser.html">用户信息</a></li>
        <li><a href="BookCar.html">我的书架</a></li>
    </ul>
    <span class="userinfo">用户名：<span id="name"></span>&nbsp;<a href="" onclick="loginout()">注销</a></span>
    <span class="gotologin">请先<a href="login.html">登录</a></span>
</nav>

<div class="container">
    <h1>我的书架</h1>
    <table id="cart-table">
        <thead>
        <tr>
            <th>书名</th>
            <th>预览</th>
            <th>作者</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 在这里添加小说到书单 -->
        </tbody>
    </table>
</div>

<div class="cart-total">
    <h2>总计: <span class="total-num">0</span>本</h2>
</div>

<!--</div>-->

</body>
<script>
    // 小说数量
    var total = 0;
    // js入口函数
    $(document).ready(function () {
        getuser();

        // 登录验证及初始数据加载
        function getuser() {
            $.get("http://localhost:8080/getUser", null, function (data) {
                console.log(data);
                if (data === "") {
                    alert("请先登录")
                    location.href = "login.html"
                } else {
                    $(".gotologin").hide();
                    $(".userinfo").show()
                    $("#name").text(data.nikename);
                    $.get("http://localhost:8080/getBookCarList", null, function (data) {
                        console.log(data);
                        $('tbody').empty(); // 清空购物车商品列表
                        // 判断是否是空数据
                        if (data.length === 0) {
                            $('tbody').append(
                                <!-- 默认的提示行 -->
                                '<h3 >空空如也 ... </h3>'
                            );
                        }
                        data.forEach(function (item) {
                            $('tbody').append(
                                // 动态生成页面标签（有数据就渲染，没有就不渲染）
                                '<tr>' +
                                '<td>' + item.bname + '</td>' +
                                '<td>' + '<img class="item-img" src="' + item.bimg + '"/>' + '</td>' +
                                '<td class="td-author">' + item.bauthor + '</td>' +
                                '<td><button type="button" class="item-delete">删除</button></td>' + // 这里可以添加删除按钮或其他操作
                                '</tr>'
                            );
                            total += 1;
                        });
                        // 更新数量
                        updateTotalNum(total);
                    })
                }
            });
        }

        // 更新总计
        function updateTotalNum(total) {
            $('.total-num').text(total);
        }


        /*
        事件绑定时机：您的代码中对.item-delete类的点击事件绑定是在getuser函数内部进行的，
            这意味着只有在getuser函数执行时才会绑定事件。如果getuser函数只被执行一次（例如在页面加载时），
            那么之后动态添加的删除按钮将不会绑定点击事件。
        事件委托：为了解决动态添加元素的事件绑定问题，您可以使用事件委托。
            将事件监听器绑定到父元素（如document或dataList），
            然后使用选择器来筛选事件目标。
        使用了$(document).on('click', '.item-delete', function (){ ... });
        来确保所有当前和未来添加的删除按钮都能触发点击事件*/
        // 使用事件委托来处理删除按钮的点击事件
        $(document).on('click', '.item-delete', function (){
            alert("点击了删除");
            // 这里可以添加删除操作的逻辑，例如从tbody中移除对应的行
            $(this).closest('tr').remove(); // 示例：删除当前行
            updateTotalNum(total);
        });

    });
</script>
</html>